<template>
    <view :style="{ paddingTop: top + 'px' }" class="min-h-screen bg bg-[#F8F8F8]">
        <view :style="{ height: pendantHight + 'px' }"
            class="text-[#3D3D3D] font-medium  flex items-center justify-center text-[40rpx] relative">
            更换密码
            <view @click="goback" class="absolute left-[36rpx]"><up-icon name="arrow-left" color="#000"
                    size="23"></up-icon></view>

        </view>

        <view class="mx-[40rpx] mt-[267rpx]">
            <input v-model="phone" class="bg-[#EFEFEF] h-[88rpx] rounded px-[45rpx]" type="number" placeholder="请输入手机号码">
            <view class="flex items-center justify-center  mt-[45rpx]">
                <input v-model="code" class="bg-[#EFEFEF] h-[88rpx]  rounded px-[45rpx]  flex-1" type="number"
                    placeholder="请输入验证码">
                <view @click="getCode"
                    class="w-[166rpx] rounded-tr rounded-br font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    {{countdown==0?'获取验证码':countdown+'s'}}</view>
            </view>
            <view class="flex items-center justify-center  mt-[45rpx]">
                <view class="w-[5em]">新密码：</view>
                <input class="bg-[#EFEFEF] h-[88rpx] rounded px-[45rpx] flex-1" type="text" placeholder="请输入密码">
            </view>
            <view class="flex items-center justify-center  mt-[45rpx]">
                <view class="w-[5em]">确认密码：</view>
                <input class="bg-[#EFEFEF] h-[88rpx] rounded px-[45rpx] flex-1" type="text" placeholder="再次确认密码">
            </view>


        </view>

        <view class="mt-[223rpx] flex justify-center">
            <view @click="sumbit"
                class="w-[270rpx] rounded font-medium text-[34rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                确定</view>
        </view>
    </view>
    <u-popup bgColor="transparent" :show="roleSelect" @close="roleSelect = false" mode="center" round="12"
        :safeAreaInsetBottom="false">
        <view class=" translate-y-[-15%]">
            <view class="bg-white text-[#3D3D3D] w-[90vw] text-[34rpx] rounded text-center">
                <view class="text-[#000000] text-[38rpx] py-[36rpx]">请选择修改账号</view>
                <view @click="changeRolePassWord" class="py-[36rpx] border-b border-[#EFEFEF]">学员<text
                        class="ml-2 ">15077402465</text></view>
                <view @click="changeRolePassWord" class="py-[36rpx] border-b border-[#EFEFEF]">教师<text
                        class="ml-2 ">JS15077402465</text></view>
                <view @click="changeRolePassWord" class="py-[36rpx] ">管理员<text class="ml-2 ">GLY15077402465</text>
                </view>
            </view>
            <view class=" w-[90vw] text-center flex justify-center mt-[107rpx] ">
                <u-icon  @click="roleSelect = false" name="close-circle-fill" color="#FFF" size="28"></u-icon>
            </view>
        </view>


    </u-popup>
    <u-popup bgColor="transparent" :show="successful" @close="successful = false" mode="center" round="12"
        :safeAreaInsetBottom="false">

        <view class="bg-white text-[#3D3D3D] w-[82vw] text-[34rpx] rounded text-center pb-[63rpx] font-bold">


            <view class="mt-[112rpx]">教师<text class="ml-2 ">JS15077402465</text></view>
            <view class=" text-[38rpx] mt-[63rpx]">修改密码成功</view>
            <view class="mt-[135rpx] flex justify-center">
                <view
                    class="w-[270rpx] rounded font-medium text-[34rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    确定</view>
            </view>
        </view>




    </u-popup>
</template>

<script setup>
import api from "@/api/api"
import { useUserStore } from '@/stores/userinfo'
import { ref } from "vue"
const roleSelect = ref(false)
const res = wx.getMenuButtonBoundingClientRect()
const top = ref(res.top) //胶囊距上距离
const pendantHight = ref(res.bottom - res.top) //胶囊高度  
const agreement = ref(false)
const successful = ref(false)
const password = ref("")
const repassword = ref("")
const code = ref("")
const phone = ref("")

const countdown = ref(0)
const goback = () => {
    uni.navigateBack()
}
const navigateTo = (url) => {
    uni.navigateTo({
        url
    })
}
const sumbit = () => {
    
    roleSelect.value = true
}
const changeRolePassWord = () => {
    roleSelect.value = false
    successful.value = true
} 
const getCode = async () => {
    
    uni.showLoading({
        title: '发送中',
        mask: true
    })
    const regex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (regex.test(phone.value)) {
        countdown.value = 60
       const timer =  setInterval(() => {
            countdown.value--
            if (countdown.value == 0) {
                clearInterval(timer)
            }
        }, 1000)
        const res = await api.getPhoneCode({
            phone: phone.value,
            event: 'changepwd'
        })
        if (res.code == 200) {
            uni.showToast({
                title: '发送成功',
                icon: 'none'
            })
        }else{
            uni.showToast({
                title: res.msg,
                icon: 'error'
            })
        }


    }else{
        uni.showToast({
        title: '请输入正确手机号码',
        icon: 'none'
    })
    }

    
}
</script>

<style lang="scss" scoped>
.bg {
    background: linear-gradient(168deg, rgba(255, 146, 127, 0.4) 0%, #FFFFFF 40%, rgba(255, 255, 255, 0) 100%);
}
</style>